// 安全监控系统  预览模式下 断电区域相关功能的组件开发
import component from "../Component.js"
import {LayerType} from "../../experience/db/SafeMonitorType.js"
import Type from "../../experience/db/Type.js";

export default class LayerViewer extends component {
    constructor() {
        super()
    }

    control() {
        this.$$("#layerselect-popup").on("click", async () => {
            // 这里 每次好需要保存一下 原始的图层列表
            const originalCheckBox =  []
            document.getElementsByName('layer-select-checkbox').forEach((el) => {originalCheckBox.push(el)})

            this.originalSelectedLayers = originalCheckBox.filter((el) => {return el.checked}).map((i) => {return i.value})
            if(originalCheckBox.length != 0) {
                // 表示 已经创建过了，不要再重复创建图层选择的dialog了
                this.popup.open();
            }
            else {
                this.popup = this.app.popup.create({ el: '.sm-layerselect-pop' });
                const checkBox = this.$$('.sm-layerselect-pop article')
                const layerTemplate = await this.LayerCheckBoxTemplateCreate()
                const innerCheckBox = `<div class="list list-strong-ios list-outline-ios list-dividers-ios">
                                            <ul>
                                              ${layerTemplate}
                                            </ul>
                                      </div>`
                checkBox.append(innerCheckBox)
                this.popup.open();
            }

        });
        this.$$('#layerselect').on('click',() => {
            const checkboxList = document.getElementsByName('layer-select-checkbox')
            const ExtractLayers = []
            checkboxList.forEach((checkboxitem) => {
                if(checkboxitem.checked) {
                    ExtractLayers.push(checkboxitem.value)
                }
            })
            // 根据要显示的图纸图层有哪些，重新渲染，渲染之后，对元素重新绘制颜色
            this.drawer._smRefreshMetaByLayers(ExtractLayers).then(() => {
                this.drawer.refreshLayerCustomColor()
            })
        })
        this.$$('#layerselectCancel').on('click',() => {
            const checkboxList = document.getElementsByName('layer-select-checkbox')
            checkboxList.forEach((checkboxitem) => {
                if(this.originalSelectedLayers.some((item) => {return checkboxitem.value == item })) {
                    checkboxitem.checked = true
                }
                else {
                    checkboxitem.checked = false
                }
            })
        })

    }

    template() {
        const div = `
            <div class="popup upload-popup sm-layerselect-pop" style="height: 340px;">
                <header>
                    <span>图层选择</span>
                </header>
                <article style="height: 240px;overflow-y: auto">
                </article>
                <footer class="uploader-footer">
                    <p style="flex: 3"></p>
                    <div style="flex: 1;width: 90px">
                        <button style="flex: 1" class="button button-fill color-theme-blue popup-close" id="layerselect">确定</button>
                    </div>
                    <div style="flex: 1;width: 90px">
                        <button id="layerselectCancel"  class="button button-fill color-gray popup-close">取消</button>
                    </div>
                </footer>
            </div>
        `
        this.$$('#app').append(div);
    }

    async LayerCheckBoxTemplateCreate() {
        const layers = await this.db.operation(Type.Layer,'getAll')
        let checkBoxTemplate = ''
        // 第一次加载的时候 获取全部图层值作为，初始状态下的已选中图层列表
        this.originalSelectedLayers = layers.map((layer) => {
            return layer.layer
        })
        layers.forEach((layer) => {
            checkBoxTemplate = checkBoxTemplate.concat(`<li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" checked name="layer-select-checkbox" value="${layer.layer}" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">${layer.layer}</div>
              </div>
            </label>
          </li>`)
        })

        return checkBoxTemplate
    }
}



